<template>
 <div id="editAd">
  <order-nav :title="title1" />
  <div class="">
    <div class="font-500 font-28 mt-40 px-32 box-border" v-if="num === '1'">{{ $t('1/3.设置类型&价格') }}</div>
    <div class="font-500 font-28 mt-40 px-32 box-border" v-if="num === '2'">{{ $t('2/3.设置类型&价格') }}</div>
    <div class="font-500 font-28 mt-40 px-32 box-border" v-if="num === '3'">{{ $t('3/3.设置类型&价格') }}</div>
    <div class="mt-42 flex justify-between items-center px-32 box-border">
      <div class="w-72 h-72  border lh-72 text-center bg-bl" >1</div>
      <div class="h-8 bg-grey flex-1"></div>
      <div class="w-72 h-72  border lh-72 text-center" :class="num ==='2' || num ==='3'  ? 'bg-bl' : 'bg-grey'" >2</div>
      <div class="h-8 bg-grey flex-1"></div>
      <div class="w-72 h-72  border lh-72 text-center" :class="num ==='3' ? 'bg-bl' : 'bg-grey'" >3</div>
    </div>
   <div v-if="num === '1'">
     <div class="flex mt-48 h-100 bg-grey items-center mx-32 box-border">
       <div class="h-80  font-28 font-400 mr-24 flex-1 text-center lh-80" :class="info.direction ==='buy' ? 'bg-wh' : 'bg-grey'" @click="tabClick('buy')">{{ $t('购买') }}</div>
       <div class="h-80  font-28 font-400 flex-1 text-center lh-80" :class="info.direction ==='sell' ? 'bg-wh' : 'bg-grey'" @click="tabClick('sell')" >{{ $t('出售') }}</div>
     </div>
     <div class="flex mt-56 px-32 box-border">
       <div class="font-500 font-28 flex-1">{{ $t('币种') }}</div>
       <div class="font-500 font-28 flex-1">{{ $t('用法币') }}</div>
     </div>
     <div class="flex mt-20 rounded-xl px-32 box-border">
       <div class="flex-1">
         <van-dropdown-menu active-color="#1D91FF">
           <van-dropdown-item v-model="info.symbol" :options="option1" />
         </van-dropdown-menu>
       </div>
       <div class="flex-1">
         <van-dropdown-menu active-color="#1D91FF">
           <van-dropdown-item v-model="info.currency" :options="option2" />
         </van-dropdown-menu>
       </div>
<!--       <div class="h-100 font-400 font-32 bg-grey lh-100 ml-14 flex-1 px-26 rounded-xl">TWD</div>-->
     </div>

    <div class="h-16 w-full bg-grey mt-44"></div>
    <div class="px-32 box-border ">
      <div class="mt-44 font-500 font-28">{{ $t('设置价格') }}</div>
      <div class="flex mt-48 h-100 items-center">
        <div class="w-360 h-80 text-blue rounded-xl border-solid-blue font-28 font-400 text-center lh-80">{{ $t('固定价格') }}</div>
      </div>
      <div class="flex justify-between mt-58">
        <div class=" font-400 font-28 ">{{ $t('设置价格') }}</div>
        <div class=" font-400 font-28 ">{{ $t('市场最高价') }}</div>
      </div>
      <div class="flex justify-between mt-34">
        <div class=" flex items-center">
          <div class="mr-27 font-700 font-48">
            <span class="mr-20">$</span>
            <span>{{ info.symbol_value }}</span>
          </div>
          <img  @click="showKeyboard = true; cachePrice=''" class="w-39 h-39 ml-27" src="@/assets/image/otc/buy/price_icon.png" alt="">
        </div>
        <div class=" font-700 font-48">
          <span class="mr-20">$</span>
          <span>{{ adParams.price }}</span>
        </div>
      </div>

    </div>
    <div class="w-full pb-40">
      <div class="h-16 w-full bg-grey "></div>
      <div class="flex justify-center items-center" @click="ClickNum('2')">
        <div class="h-99 bg-blue text-white mt-56 wd text-center lh-99">{{ $t('下一步') }}</div>
      </div>
    </div>
   </div>
    <div v-if="num === '2'">
      <div class="mt-40 font-500 font-28 px-32 box-border">
        {{ $t('交易数量') }}
      </div>
      <div class="mx-32 h-100 bg-grey flex justify-between items-center px-32 mt-20">
        <input v-model="info.coin_amount" class="h-100 border-none bg-grey"  type="number" :placeholder="$t('输入交易数量')">
        <span>{{ info.symbol.toUpperCase() }}</span>
      </div>
      <div class="mt-28 font-500 font-28 px-32 box-border">
        {{ $t('单笔订单限额') }}
      </div>
      <div class="px-32 mt-20 flex justify-between items-center">
        <div class="w-350 bg-grey  box-border h-100 px-24 flex justify-between rounded-xl flex-1 lh-100">
          <input style="border: none"  class="w-200 bg-grey font-400 font-28" v-model="info.investment_min" type="number">
<!--          <span class="font-400 font-28">{{ info.investment_min }}</span>-->
          <span class="font-400 font-28">{{ this.info.currency }}</span>
        </div>
        <div class="w-22 h-3 mx-22 bg-black"></div>
        <div class="w-350 bg-grey  box-border h-100 px-24 flex justify-between rounded-xl flex-1 lh-100">
          <input style="border: none"  class="w-200 bg-grey font-400 font-28" v-model="info.investment_max" type="number">
          <span class="font-400 font-28">{{ this.info.currency }}</span>
        </div>
      </div>
      <div class="h-16 w-full bg-grey mt-48"></div>
      <div class="mt-56 font-500 font-28 px-32 box-border">
          {{ $t('付款方式') }}
      </div>
      <div class="mt-20 font-500 font-28 px-32 box-border text-grey">
          {{ $t('最多选择3个') }}
      </div>
      <div class="flex mb-72 justify-between items-center mt-44 px-32 box-border flex-wrap" >

        <div :key="key + 'method_config_map'" v-for="(value, key) in method_config_map" class="relative bg-grey flex-1 mr-22"  @click="choose(value, key)" >
          <div class="text-center  h-82 lh-82 rounded-lg font-400 font-28 border-none " >
            <img class="w-26 h-22 mr-18" src="@/assets/image/otc/buy/BankCard_icon.png" alt="">
            {{ value }}
          </div>
          <img v-show="findActive(key)" class="absolute top-0 right-0 w-232 h-82 " src="@/assets/image/otc/wantBuyHead/trade_bg.png" alt="">
        </div>
      </div>
      <div class="h-16 w-full bg-grey mt-54"></div>
      <div class="mt-48 px-32 flex justify-between">
        <div class="font-500 font-28">{{ $t('支持時效') }}</div>
        <div @click="showPopup">
          <span class="font-500 font-28 mr-18">{{ timeList[info.expire_time] }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <van-popup v-model="show" round position="bottom" :style="{ height: '453px' }"   closeable>
        <div class="font-500 font-36 text-center mt-32">
          {{ $t('支持時效') }}
        </div>
        <div class="mt-52 bg">
          <van-radio-group v-model="info.expire_time" >
            <van-cell-group>
              <div class="text-center">
                <van-cell :key="'timeList' + key" v-for="(value, key) in timeList" :title="value" clickable @click="info.expire_time = key">
                  <template #right-icon>
                    <van-radio :name="key" >
                      <template #icon="props">
                        <img v-if="props.checked" class="img-icon w-36 h-36" :src="props.checked ? activeIcon : ''" />
                        <div class="w-36 h-36" v-else></div>
                      </template>
                    </van-radio>
                  </template>
                </van-cell>

              </div>
            </van-cell-group>
          </van-radio-group>
        </div>
        <div class="font-400 font-32 text-center mt-62 text-grey">
          {{ $t('選擇付款方式以及對方支付的時間限制') }}
        </div>
      </van-popup>
      <div class="h-16 w-full bg-grey mt-48"></div>
      <div class="mt-50 flex px-32 box-border justify-between">
        <div class="font-400 font-36 bg-grey h-100 lh-100 text-center rounded-lg mr-22 width_30"  @click="ClickNum('1')">{{ $t('上一步') }}</div>
        <div class="font-400 font-36 bg-blue text-white h-100 lh-100 text-center rounded-lg flex-1" @click="ClickNum('3')">{{ $t('下一步') }}</div>
      </div>
    </div>
    <div v-if="num === '3'">
      <div class="mt-40 font-500 font-28 px-32 box-border">
       {{ $t(' 交易条款（选填）') }}
      </div>
      <div class="mt-20 px-32 box-border">
        <van-field
            v-model="info.transaction_terms"
            rows="5"
            maxlength="1000"
            show-word-limit
            type="textarea"
            :placeholder="$t('交易條款將在用戶下單前展示')"
        />
      </div>
      <div class="mt-40 font-500 font-28 px-32 box-border">
        {{ $t('訂單自動消息（選填）') }}
      </div>
      <div class="mt-20 px-32 box-border">
        <van-field
            v-model="info.order_msg"
            rows="5"
            maxlength="1000"
            show-word-limit
            type="textarea"
            :placeholder="$t('自動回復消息在交易對方下單後將Dion發送給對方')"
        />
      </div>
      <div class="h-16 w-full bg-grey mt-40"></div>
      <div class="px-32">
        </van-radio-group>
        <div class="h-2 w-full bg-grey mt-50"></div>
        <div class="mt-50">
          <van-radio-group v-model="info.on_sale">
            <div class="mb-44">
              <van-radio name="1">{{ $t('立即上線') }}</van-radio>
            </div>

            <van-radio name="0">{{ $t('稍後手動上線') }}</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="h-16 w-full bg-grey mt-50"></div>
      <div class="mt-50 pb-94 flex px-32 box-border justify-between">
        <div class="font-400 font-36 bg-grey h-100 lh-100 text-center rounded-lg mr-22 width_30"  @click="ClickNum('2')">{{ $t('上一步') }}</div>
        <div class="font-400 font-36 bg-blue text-white h-100 lh-100 text-center rounded-lg flex-1" @click="handleAd">{{ $t('保存') }}</div>
      </div>
    </div>
  </div>
   <van-number-keyboard
       :show="showKeyboard"
       v-model="info.symbol_value"
       :title="info.symbol_value"
       extra-key="."
       :close-button-text="this.$t('完成')"
       @blur="showKeyboard = false"
   />
   <transition name="left">
     <payPwdInput @submit="handPwd" v-if="showInput" class="bg-white absolute left-0 top-0 w-full h-full" @close="handleClosePwd"></payPwdInput>
   </transition>
 </div>
</template>

<script>
import payPwdInput from "@/components/payPwdInput";
import OrderNav from "@/components/order-nav/OrderNav";
import { Step, Steps,DropdownMenu, DropdownItem ,Icon,Field,Checkbox, CheckboxGroup,Popup, RadioGroup, Radio, Cell, CellGroup, NumberKeyboard, Toast } from 'vant';
import {c2cGetCurrencyList, c2cGetPayCurrencyList, countAdParams, getCtcAdvertToken, getTimeList, editAd, placeAd} from "@/API/otc";
export default {
  name: "editAd",
  created() {
    console.log(this.$route.query)
    this.pageType = this.$route.query.type
    if (this.pageType === '1') {
      this.info = {  ...this.info, ...this.$route.query }
    }

    if (this.info.pay_type) { // choose(value, key)
      let a = this.info.pay_type.split(',')
      let b = this.info.pay_type_name.split(',')
      for (let i = 0; i < a.length; i++) {
        this.choose(b[i], a[i])
      }

    }

    getTimeList().then(res => {
      //console.log('支付时效列表', res)
      this.timeList = res
      if (!this.info.expire_time) {
        this.info.expire_time = Object.keys(res)[0]
      }
    })

    Promise.all([this.getCurrencyList(),  this.getPayCurrencyList()]).then(res => {
      //console.log('Promise.all', res)
      this.getCountAdParams()
      this.getSessionToken()
    })

  },
  data(){
    return{
      showInput: false,
      timeList: null, // 支付时效列表
      adParams: {}, // 计算过的广告相关参数 如市场最高价等
      cachePrice: '', // 数字键盘缓存价格
      showKeyboard: false, // 数字键盘
      info: {
        id: '', // 修改的时候
        safeword: '', // 资金密码
        payment_method1: '',
        payment_method2: '',
        payment_method3: '',
        direction: 'buy', // 买卖方式：buy买/sell卖
        currency: '', // 支付币种
        symbol: '', // 上架币种
        coin_amount: '', // 交易数量
        symbol_value: '', // 币种单价
        investment_min: '', // 订单最低限额
        investment_max: '', // 订单最高限额
        on_sale: 0, // 是否上架(立即上線) 0 下架 1上架
        closed: 0, // 是否关闭 0 否 1 是
        expire_time: '', // 支付时效(分钟)
        transaction_terms: '', // 交易条款
        order_msg: '', // 订单自动消息
        remark: '', // 备注
      },
      pageType: '0', // 0 发布广告 1 编辑广告
      show: false,
      active: 0,
      buy:1,
      type: "1",
      num:'1',
      value1: 0,  // 上架币种
      value2: 0, // 法币
      price:'1',
      showT:false,
      showQ:false,
      showP:false,
      checked: true,
      check: false,
      checking:false,
      select:false,
      selected:false,
      message:'',
      radio: '1',
      radio2:'1',
      activeIcon:require('@/assets/image/成功.png'),
      option1: [ // 上架币种
      ],
      option2: [ // 法币
      ],
    }
  },
  components:{
    payPwdInput,
    OrderNav,
    [Field.name]: Field,
    [Icon.name]: Icon,
    [Step.name]: Step,
    [Steps.name]: Steps,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [NumberKeyboard.name]: NumberKeyboard,
  },
  computed: {
    title1 () {
      return this.pageType === '0' ? this.$t('发布广告') : this.$t('编辑广告')
    },
    pay_type_name () {
      let a = this.info.payment_method1 ? this.method_config_map[this.info.payment_method1] : ''
      let b = this.info.payment_method2 ? this.method_config_map[this.info.payment_method2] : ''
      let c = this.info.payment_method3 ? this.method_config_map[this.info.payment_method3] : ''
      console.log(a, b, c)
      let arr = []
      if (a) {
        arr.push(a)
      }
      if (b) {
        arr.push(b)
      }
      if (c) {
        arr.push(c)
      }
      return arr.join(',')
    },
  },
  watch: {
    'info.symbol' (val) {
      this.getCountAdParams()
    }
  },
  methods:{
    getCurrencyList() {
      return  c2cGetCurrencyList().then(res => {
        //console.log('上架币种列表', res)
        Object.keys(res).forEach(key => {
          this.option1.push({
            text: res[key],
            value: key
          })
        })
        if (!this.info.symbol) {
          this.info.symbol = this.option1[0].value
        }
      })
    },
    getPayCurrencyList() {
      return c2cGetPayCurrencyList().then(res => {
        //console.log('法币列表', res)
        res.forEach(item => {
          this.option2.push({
            text: item.currency,
            value: item.currency
          })
        })
        if (!this.info.currency) {
          this.info.currency = this.option2[0].value
        } else {
          this.info.currency = res.find((item) => {
            return item.currency === this.info.currency
          }).currency
        }
      })
    },
    handleClosePwd() {
      this.showInput = false
    },
    handPwd(pwd) {
      this.handleClosePwd()
      this.info.safeword = pwd
      this.handleAd()
    },
    handleAd() {
      //  this.$router.push('/saveAd')
      if (!this.info.safeword) {
        this.showInput = true
        return
      }
      if (this.info.type === '1') { // 编辑广告
        Toast.loading()
        editAd({
          session_token: this.session_token,
          ...this.info
        }).then(res => {
          //console.log('编辑广告', res)
          Toast(this.$t('修改成功'))
          // this.getSessionToken()
          this.$router.push({
            path: '/saveAd',
            query: {
              ...this.info,
              pay_type_name: this.pay_type_name
            }
          })
        }).catch(err => {
          this.info.safeword = ''
          this.getSessionToken()
        })
      } else { // 发布新广告
        Toast.loading()
        placeAd({
          session_token: this.session_token,
          ...this.info
        }).then(res => {
          //console.log('编辑广告', res)
          Toast(this.$t('提交成功'))
          this.$router.push({
            path: '/saveAd',
            query: {
              ...this.info
            }
          })
        }).catch(err => {
          this.info.safeword = ''
          this.getSessionToken()
        })
      }

    },
    findActive(key){
      return key === this.info.payment_method1 || key === this.info.payment_method2 || key === this.info.payment_method3;
    },
    getSessionToken() {
      getCtcAdvertToken({
        currency: this.info.currency,
        symbol: this.info.symbol,
        language: this.$i18n.locale
      }).then(res => {
        //console.log('token', res)
        this.session_token = res.session_token
        this.method_config_map = res.method_config_map // 支付方式列表
      })
    },
    getCountAdParams() { // 获取计算的广告参数
      countAdParams({
        currency: this.info.currency,
        symbol: this.info.symbol,
        coin_amount: this.info.coin_amount,
        symbol_value: this.info.symbol_value
      }).then((res) => {
        //console.log('计算广告参数', res)
        this.adParams = res
      })
    },
    tabClick(type) {
      this.info.direction = type;
    },
    ClickNum(num){
      if (num === '2') {
        if (!this.info.symbol || !this.info.currency || !this.info.symbol_value) {
          Toast(this.$t('上架币种，法币或价格不能为空'))
          return
        }

      }
      if (num === '3') {
        if (!this.info.coin_amount || !this.info.investment_min || !this.info.investment_max || (!this.info.payment_method1 && !this.info.payment_method2 && !this.info.payment_method3)) {
          Toast(this.$t('交易数量，单笔限额，付款方式都不能为空'))
          return
        }
        if (this.info.coin_amount / 1 > this.adParams.coin_amount_max / 1) {
          Toast(this.$t('最大交易币种数量不能超过')+this.adParams.coin_amount_max);
          return;
        }
        if (this.info.investment_max / 1 > this.adParams.investment_max_limit / 1) {
          Toast(this.$t('最大支付金额不能超过')+this.adParams.investment_max_limit);
          return;
        }
        if (this.info.investment_min / 1 < this.adParams.investment_min_limit / 1) {
          Toast(this.$t('最小支付金额不能低于')+this.adParams.investment_min_limit);
          return;
        }
      }
      this.num = num;
    },
    ClickPrice(price){
      this.price = price ;
    },
    choose(val, key){
      if (key === this.info.payment_method1) { // 取消
        this.info.payment_method1 =   ''
        return
      } else if (key === this.info.payment_method2) {
        this.info.payment_method2 =   ''
        return
      } else if (key === this.info.payment_method3) {
        this.info.payment_method3 =   ''
        return
      }

      if (!this.info.payment_method1) {
        this.info.payment_method1 = key
      } else if (this.info.payment_method1 && !this.info.payment_method2) {
        this.info.payment_method2 = key
      } else if (this.info.payment_method1 && this.info.payment_method2  && !this.info.payment_method3) {
        this.info.payment_method3 = key
      }

    },
    showPopup() {
      this.show = true;
    },
  }


}
</script>

<style lang="scss" scoped>
#editAd{
  ::v-deep{
    .van-cell__title {
      font-size: 16px;
    }
    .van-cell {
      height: 120px;
    }
    .van-cell__title {
      font-size: 32px;
      display: flex;
      //justify-content: center;
      align-items: center;
    }
  }

  .left-enter-active {
    animation: left-in .2s;
  }
  .left-leave-active {
    animation: left-in .2s reverse;
  }
  @keyframes left-in {
    0% {
      transform: translate3d(-100%, 0, 0);
    }
    25% {
      transform: translate3d(-75%, 0, 0);
    }
    50% {
      transform: translate3d(-50%, 0, 0);
    }
    75% {
      transform: translate3d(-25%, 0, 0);
    }
    100% {
      transform: translate3d(0%, 0, 0);
    }
  }
  .border{
    border-radius: 36px;
  }
  .bg-wh{
    background: #FFFFFF;
    border: 1px solid #B8BCC5;
  }
  .bg-bl{
    background: #2C78F8;
    color: #FFFFFF;
  }
  .width{
    width: 50%;
  }
  .wd{
    width: 92%;
  }
  .width_30{
    width: 30%;
  }
  .border_top {
    border-top: 1px solid #C8CAD2;
  }
}
</style>
